<template>
  <el-container>
    <el-aside width="400px">
      <el-row type="flex" justify="space-between">
        <el-col :span="12"><el-tag>患者选择</el-tag></el-col>
        <el-col :span="12"><el-button type="primary" icon="el-icon-refresh" size="small" style="float:right"></el-button></el-col>
      </el-row>
      <el-row>
        <el-form :inline="true" :model="formInline">
          <el-form-item label="患者名：">
            <el-input v-model="formInline.content" placeholder="请输入姓名或者病历号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="searchMember" style="width: 100%">
          <el-table-column prop="id" label="编号">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
          <el-table-column prop="age" label="年龄">
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-tabs type="card">
          <el-tab-pane label="本人">
            <el-row>
              <el-tag>已诊患者：</el-tag>
            </el-row>
            <el-row>
              <el-table style="width: 100%">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
              </el-table>
            </el-row>
            <el-row>
              <el-tag>未诊患者：</el-tag>
            </el-row>
            <el-row>
              <el-table style="width: 100%">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
              </el-table>
            </el-row>            
          </el-tab-pane>
          <el-tab-pane label="科室">
            <el-row>
              <el-tag>已诊患者：</el-tag>
            </el-row>
            <el-row>
              <el-table>
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
              </el-table>
            </el-row>
            <el-row>
              <el-tag>未诊患者：</el-tag>
            </el-row>
            <el-row>
              <el-table>
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
              </el-table>
            </el-row>             
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-aside>
    <el-main>
      <el-row class="main-row">
        <el-col :span="2">
          <el-tag>患者信息：</el-tag>
        </el-col>
        <el-col :span="20" style="height:32px">
          <p>123</p>
        </el-col>
        <el-col :span="2">
          <el-button size="small" type="primary" style="float:right">诊毕</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-tabs type="card">
          <el-tab-pane label="病历首页">
            <el-row class="main-row back">
              <el-col :span="5" :offset="4"><el-button type="primary" size="small">暂存</el-button></el-col>
              <el-col :span="5" ><el-button type="primary" size="small">提交</el-button></el-col>
              <el-col :span="5" ><el-button type="primary" size="small">清空</el-button></el-col>
              <el-col :span="5" ><el-button type="primary" size="small">刷新</el-button></el-col>
            </el-row>
            <el-row>
              <el-tag>病史内容：</el-tag>
            </el-row>
            <el-row class="main-row">
              <el-form ref="bingLiForm" :model="bingLiForm" label-width="100px" width="1200px">
                <el-form-item label="主诉">
                  <el-input v-model="bingLiForm.zhusu"></el-input>
                </el-form-item>
                <el-form-item label="现病史">
                  <el-input v-model="bingLiForm.xianbing"></el-input>
                </el-form-item>
                <el-form-item label="现病治疗情况">
                  <el-input v-model="bingLiForm.zhiliao"></el-input>
                </el-form-item>
                <el-form-item label="既往史">
                  <el-input v-model="bingLiForm.jiwang"></el-input>
                </el-form-item>
                <el-form-item label="过敏史">
                  <el-input v-model="bingLiForm.guomin"></el-input>
                </el-form-item>
                <el-form-item label="体格检查">
                  <el-input v-model="bingLiForm.tige"></el-input>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row>
              <el-tag>评估/诊断：</el-tag>
            </el-row>
            <el-row class="main-row">
              <el-card>
                <div slot="header" class="clearfix">
                  <span style="float:left">西医诊断</span>
                  <el-button style="float:right">删除</el-button>
                  <el-button style="float:right">增加</el-button>
                </div>
                <div>
                  <el-table ref="multipleTable" :data="xiData">
                    <el-table-column type="selection" width="100px"></el-table-column>
                    <el-table-column label="ICD编码" width="300px"></el-table-column>
                    <el-table-column label="名称" width="300px"></el-table-column>
                    <el-table-column label="发病时间"></el-table-column>
                  </el-table>
                </div>
              </el-card>
            </el-row>
            <el-row class="main-row">
              <el-card>
                <div slot="header" class="clearfix">
                  <span style="float:left">中医诊断</span>
                  <el-button style="float:right">删除</el-button>
                  <el-button style="float:right">增加</el-button>
                </div>
                <div>
                  <el-table ref="multipleTable" :data="xiData">
                    <el-table-column type="selection" width="100px"></el-table-column>
                    <el-table-column label="ICD编码" width="300px"></el-table-column>
                    <el-table-column label="名称" width="300px"></el-table-column>
                    <el-table-column label="发病时间"></el-table-column>
                  </el-table>
                </div>
              </el-card>              
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="检查申请">
            <el-row class="main-row">
              <el-col :span="16">
                <el-row class="back">
                  <el-col :span="4" :offset="4"><el-button type="primary" size="small">新增项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">删除项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">开立项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">作废项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">刷新</el-button></el-col>
                </el-row>
                <el-row>
                  <el-tag>本项目金额合计</el-tag>
                  <el-tag type="warning">0元</el-tag>
                </el-row>
                <el-row>
                  <el-table ref="multipleTable" :data="jianchaPro">
                    <el-table-column type="selection" width="50px"></el-table-column>
                    <el-table-column label="申请名称" width="120px"></el-table-column>
                    <el-table-column label="项目名称" width="120px"></el-table-column>
                    <el-table-column label="执行科室" width="120px"></el-table-column>
                    <el-table-column label="执行状态" width="120px"></el-table-column>
                    <el-table-column label="单价" width="100px"></el-table-column>
                    <el-table-column label="检查结果" width="100px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-tabs type="card">
                  <el-tab-pane label="常用模板">
                    <el-table>
                      <el-table-column label="名称"></el-table-column>
                      <el-table-column label="操作"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="检验申请">
            <el-row class="main-row">
              <el-col :span="16">
                <el-row class="back">
                  <el-col :span="4" :offset="4"><el-button type="primary" size="small">新增项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">删除项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">开立项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">作废项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">刷新</el-button></el-col>
                </el-row>
                <el-row>
                  <el-tag>本项目金额合计</el-tag>
                  <el-tag type="warning">0元</el-tag>
                </el-row>
                <el-row>
                  <el-table ref="multipleTable" :data="jianyanPro">
                    <el-table-column type="selection" width="50px"></el-table-column>
                    <el-table-column label="申请名称" width="120px"></el-table-column>
                    <el-table-column label="项目名称" width="120px"></el-table-column>
                    <el-table-column label="执行科室" width="120px"></el-table-column>
                    <el-table-column label="执行状态" width="120px"></el-table-column>
                    <el-table-column label="单价" width="100px"></el-table-column>
                    <el-table-column label="检查结果" width="100px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-tabs type="card">
                  <el-tab-pane label="常用模板">
                    <el-table>
                      <el-table-column label="名称"></el-table-column>
                      <el-table-column label="操作"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>            
          </el-tab-pane>
          <el-tab-pane label="门诊确诊">
            <el-row class="main-row">
              <el-tag>最终诊断结果：</el-tag>
            </el-row>
            <el-row class="main-row">
              <el-card>
                <div slot="header" class="clearfix">
                  <span style="float:left">西医诊断</span>
                  <el-button style="float:right">删除</el-button>
                  <el-button style="float:right">增加</el-button>
                </div>
                <div>
                  <el-table ref="multipleTable" :data="xiData">
                    <el-table-column type="selection" width="100px"></el-table-column>
                    <el-table-column label="ICD编码" width="300px"></el-table-column>
                    <el-table-column label="名称" width="300px"></el-table-column>
                    <el-table-column label="发病时间"></el-table-column>
                  </el-table>
                </div>
              </el-card> 
            </el-row>
            <el-row class="main-row">
              <el-card>
                <div slot="header" class="clearfix">
                  <span style="float:left">中医诊断</span>
                  <el-button style="float:right">删除</el-button>
                  <el-button style="float:right">增加</el-button>
                </div>
                <div>
                  <el-table ref="multipleTable" :data="xiData">
                    <el-table-column type="selection" width="100px"></el-table-column>
                    <el-table-column label="ICD编码" width="300px"></el-table-column>
                    <el-table-column label="名称" width="300px"></el-table-column>
                    <el-table-column label="发病时间"></el-table-column>
                  </el-table>
                </div>
              </el-card>               
            </el-row>
            <el-row class="main-row">
              <el-form :model="quezhenForm">
                <el-form-item label="检查结果">
                  <el-input type="textarea" v-model="quezhenForm.jinachaResult"></el-input>
                </el-form-item>
                <el-form-item label="检验结果">
                  <el-input type="textarea" v-model="quezhenForm.jinayanResult"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">提交</el-button>
                </el-form-item> 
              </el-form>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="处置申请">
            <el-row class="main-row">
              <el-col :span="16">
                <el-row class="back">
                  <el-col :span="4" :offset="4"><el-button type="primary" size="small">新增项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">删除项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">开立项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">作废项目</el-button></el-col>
                  <el-col :span="4" ><el-button type="primary" size="small">刷新</el-button></el-col>
                </el-row>
                <el-row>
                  <el-tag>本项目金额合计</el-tag>
                  <el-tag type="warning">0元</el-tag>
                </el-row>
                <el-row>
                  <el-table ref="multipleTable" :data="chuzhiPro">
                    <el-table-column type="selection" width="50px"></el-table-column>
                    <el-table-column label="申请名称" width="120px"></el-table-column>
                    <el-table-column label="项目名称" width="120px"></el-table-column>
                    <el-table-column label="执行科室" width="120px"></el-table-column>
                    <el-table-column label="执行状态" width="120px"></el-table-column>
                    <el-table-column label="单价" width="100px"></el-table-column>
                    <el-table-column label="检查结果" width="100px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
              <el-col :span="8">
                <el-tabs type="card">
                  <el-tab-pane label="常用模板">
                    <el-table>
                      <el-table-column label="名称"></el-table-column>
                      <el-table-column label="操作"></el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>            
          </el-tab-pane>
          <el-tab-pane label="成药处方">
            <el-row>
              <el-tag>门诊诊断：</el-tag>
              <el-tag type="info">【西医诊断】流行性感冒</el-tag>
            </el-row>
            <el-row class="main-row back">
              <el-col :span="2" :offset="6"><el-button size="small" type="primary">增方</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">删方</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">开立</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">作废</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">刷新</el-button></el-col>
              <el-col :span="2" :offset="4"><el-button size="small" type="info">增药</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="info">删药</el-button></el-col>
            </el-row>
            <el-row class="main-row">
              <el-col :span="6">
                <el-row>
                  <el-tag type="info">门诊处方</el-tag>
                </el-row>
                <el-row>
                  <el-table>
                    <el-table-column type="selection" width="60px"></el-table-column>
                    <el-table-column label="名称" width="150px"></el-table-column>
                    <el-table-column label="状态" width="60px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
              <el-col :span="18">
                <el-row>
                  <el-tag>本处方金额合计：</el-tag>
                  <el-tag type="warning">0元</el-tag>
                </el-row>
                <el-row>
                  <el-table>
                    <el-table-column type="selection" width="50px"></el-table-column>
                    <el-table-column label="药品名称" width="300px"></el-table-column>
                    <el-table-column label="规格" width="100px"></el-table-column>
                    <el-table-column label="单价" width="80px"></el-table-column>
                    <el-table-column label="用法" width="100px"></el-table-column>
                    <el-table-column label="用量" width="60px"></el-table-column>
                    <el-table-column label="频次" width="60px"></el-table-column>
                    <el-table-column label="数量" width="60px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="main-row">
              <el-tabs type="card">
                <el-tab-pane label="处方模板">
                  <el-row>
                    <el-col :span="8">
                      <el-row>
                        <el-form :inline="true" :model="formTemInline">
                          <el-form-item label="名称：">
                            <el-input v-model="formTemInline.content" placeholder="请输入模板名称"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary">查询</el-button>
                          </el-form-item>
                        </el-form>
                      </el-row>
                      <el-row>
                        <el-table :data="searchTemplate">
                          <el-table-column prop="name" label="模板名称" width="280px">
                          </el-table-column>
                          <el-table-column prop="scope" label="范围" width="80px">
                          </el-table-column>
                        </el-table>
                      </el-row>                      
                    </el-col>
                    <el-col :span="16">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span style="float:left">模板明细</span>
                          <el-button style="float:right">使用该模板</el-button>
                        </div>
                        <div>
                          <el-table :data="mubanData">
                            <el-table-column label="药品名称" width="250px"></el-table-column>
                            <el-table-column label="规格" width="200px"></el-table-column>
                            <el-table-column label="单位" width="50px"></el-table-column>
                            <el-table-column label="用法" width="50px"></el-table-column>
                            <el-table-column label="用量" width="50px"></el-table-column>
                            <el-table-column label="频次" width="50px"></el-table-column>
                          </el-table>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="常用药品"></el-tab-pane>
                <el-tab-pane label="历史处方"></el-tab-pane>
              </el-tabs>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="草药处方">
            <el-row>
              <el-tag>门诊诊断：</el-tag>
              <el-tag type="info">【中医诊断】流行性感冒</el-tag>
            </el-row>
            <el-row class="main-row back">
              <el-col :span="2" :offset="6"><el-button size="small" type="primary">增方</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">删方</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">开立</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">作废</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary">刷新</el-button></el-col>
              <el-col :span="2" :offset="4"><el-button size="small" type="info">增药</el-button></el-col>
              <el-col :span="2"><el-button size="small" type="info">删药</el-button></el-col>
            </el-row>
            <el-row class="main-row">
              <el-col :span="6">
                <el-row>
                  <el-tag type="info">门诊处方</el-tag>
                </el-row>
                <el-row>
                  <el-table>
                    <el-table-column type="selection" width="60px"></el-table-column>
                    <el-table-column label="名称" width="150px"></el-table-column>
                    <el-table-column label="状态" width="60px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
              <el-col :span="18">
                <el-row>
                  <el-tag>本处方金额合计：</el-tag>
                  <el-tag type="warning">0元</el-tag>
                </el-row>
                <el-row>
                  <el-table>
                    <el-table-column type="selection" width="50px"></el-table-column>
                    <el-table-column label="药品名称" width="300px"></el-table-column>
                    <el-table-column label="规格" width="100px"></el-table-column>
                    <el-table-column label="单价" width="80px"></el-table-column>
                    <el-table-column label="用法" width="100px"></el-table-column>
                    <el-table-column label="用量" width="60px"></el-table-column>
                    <el-table-column label="频次" width="60px"></el-table-column>
                    <el-table-column label="数量" width="60px"></el-table-column>
                  </el-table>
                </el-row>
              </el-col>
            </el-row>
            <el-row class="main-row">
              <el-tabs type="card">
                <el-tab-pane label="处方模板">
                  <el-row>
                    <el-col :span="8">
                      <el-row>
                        <el-form :inline="true" :model="formTemInline">
                          <el-form-item label="名称：">
                            <el-input v-model="formTemInline.content" placeholder="请输入模板名称"></el-input>
                          </el-form-item>
                          <el-form-item>
                            <el-button type="primary">查询</el-button>
                          </el-form-item>
                        </el-form>
                      </el-row>
                      <el-row>
                        <el-table :data="searchTemplate">
                          <el-table-column prop="name" label="模板名称" width="280px">
                          </el-table-column>
                          <el-table-column prop="scope" label="范围" width="80px">
                          </el-table-column>
                        </el-table>
                      </el-row>                      
                    </el-col>
                    <el-col :span="16">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span style="float:left">模板明细</span>
                          <el-button style="float:right">使用该模板</el-button>
                        </div>
                        <div>
                          <el-table :data="mubanData">
                            <el-table-column label="药品名称" width="250px"></el-table-column>
                            <el-table-column label="规格" width="200px"></el-table-column>
                            <el-table-column label="单位" width="50px"></el-table-column>
                            <el-table-column label="用法" width="50px"></el-table-column>
                            <el-table-column label="用量" width="50px"></el-table-column>
                            <el-table-column label="频次" width="50px"></el-table-column>
                          </el-table>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="常用药品"></el-tab-pane>
                <el-tab-pane label="历史处方"></el-tab-pane>
              </el-tabs>
            </el-row>            
          </el-tab-pane>
          <el-tab-pane label="费用查询">
            <el-row class="main-row">
              <el-form :inline="true" :model="costSearchInline">
                <el-form-item label="病历号">
                  <el-input v-model="costSearchInline.id" placeholder="请输入病历号"></el-input>
                </el-form-item>
                <el-form-item label="项目类型">
                  <el-select v-model="costSearchInline.type" placeholder="项目类型">
                    <el-option label="任何类型" value="any"></el-option>
                    <el-option label="检验项目" value="jianyan"></el-option>
                    <el-option label="检查项目" value="jiancha"></el-option>
                    <el-option label="处置项目" value="chuzhi"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">查询</el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row>
              <el-table :data="costTable" :default-sort="{prop: 'date', order: 'ascending'}">
                <el-table-column prop="date" sorttable label="时间"></el-table-column>
                <el-table-column prop="name" label="项目名"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
                <el-table-column prop="number" label="数量"></el-table-column>
                <el-table-column prop="cost" label="金额"></el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //病历首页
      formInline: {
        content: ''
      },
      searchMember: [],
      bingLiForm: {
        zhusu: '',
        xianbing: '',
        zhiliao: '',
        jiwang: '',
        guomin: '',
        tige: ''
      },
      xiData: [],
      zhongData: [],

      //检查申请
      jianchaPro: [],

      //检验申请
      jianyanPro: [],

      //门诊确诊
      quezhenForm: {
        jianchaResult: '',
        jianyanResult: ''
      },

      //处置申请
      chuzhiPro: [],

      //
      formTemInline: {
        content: ''
      },
      searchTemplate: [],
      mubanData: [],

      //费用查询
      costSearchInline: {
        id: '',
        type: ''
      },
      costTable: []
    }
  },
  methods: {
    onSearch() {
      //console.log('search member:');
      //console.log(this.formInline.content);
      axios
        .get("api/menZhen/find", {
          params: {
            content: this.formInline.content
          }
        })
        .then(res => {
          //console.log(res);
          this.searchMember = [];
          this.searchMember.push({id:res.data.patientId, name: res.data.name, age: res.data.age});
          //console.log(this.searchMember);
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
}
</script>

<style>
  .el-tag {
    float: left;
  }

  .el-table {
    width: 100%;
  }

  .el-main {
    padding: 0px;
  }

  .main-row {
    width: 1100px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after{
    clear:both;
  }

  .back{
    background-color:#7683852b;
  }
  
  p{
    height: 32px;
    text-align: left;
    margin-block-start: 8px;
  }

</style>